<template>
  <div class="app-container">
    <basics-form
      ref="basicsForm"
      :actionLoading="loading"
      @actionBtnsClick="$refs.basicsForm.formValid()"
      @submit="search"
    />
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column prop="x" label="医院"> </el-table-column>
      <el-table-column prop="a" label="上报人"> </el-table-column>
      <el-table-column prop="b" label="联系方式"> </el-table-column>
      <el-table-column prop="c" label="故障环境"> </el-table-column>
      <el-table-column prop="d" label="故障描述">
        <template slot-scope="scope">
          <span style="color: #fb0119">sdasdsadad</span>
        </template>
      </el-table-column>
      <el-table-column prop="d" label="上报时间"> </el-table-column>
      <el-table-column prop="d" label="处理" v-if="finish">
        <template slot-scope="scope">
          <div>张三</div>
          <div>2021-03-01</div>
          <div>耗时：1天</div>
        </template>
      </el-table-column>
      <el-table-column prop="d" label="故障类型" v-if="finish">
        <template slot-scope="scope">
          <span style="color: #409eff">sdasdsadad</span>
        </template>
      </el-table-column>
      <el-table-column prop="d" label="故障原因" v-if="finish">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="100px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="showDetails"
            >故障与处理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog
      title="故障与处理"
      :visible.sync="openView"
      width="1200px"
      append-to-body
    >
      <div>
        <basics-form
          ref="basicsAddForm1"
          :titleAligin="'right'"
          :titleWidth="'100px'"
          :minWidth="'300px'"
          hiddenMustIcon
        />
        <environment />
        <basics-form
          ref="basicsAddForm2"
          :titleAligin="'right'"
          :titleWidth="'100px'"
          :minWidth="'300px'"
          hiddenMustIcon
          :actionLoading="loading"
          @actionBtnsClick="addAction"
          @submit="addSubmit"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BasicsForm from "@/components/BasicsForm";
import Environment from "./environment";

export default {
  name: "organi-index",
  components: { BasicsForm, Environment },
  props: {
    finish: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      loading: false,
      tableLoading: false,
      openView: false, //新增弹出
      total: 25,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      tableData: [],
      tableData2: [
        {
          x: "x",
          a: "王小虎",
          b: "234",
          c: "3.2",
          d: 10,
        },
        {
          x: "x",
          a: "王小虎",
          b: "234",
          c: "3.2",
          d: 10,
        },
        {
          x: "x",
          a: "王小虎",
          b: "234",
          c: "3.2",
          d: 10,
        },
        {
          x: "x",
          a: "王小虎",
          b: "234",
          c: "3.2",
          d: 10,
        },
        {
          x: "x",
          a: "王小虎",
          b: "234",
          c: "3.2",
          d: 10,
        },
      ],
    };
  },
  created() {},
  methods: {
    init() {
      this.initRules();
      this.getList();
    },
    //搜索
    search(param) {
      if (!param) {
        return;
      }
      for (let key in param) {
        this.queryParams[key] = param[key];
      }
      this.getList();
    },
    getList() {
      this.loading = true;
      this.tableLoading = true;
      this.tableData = [];
      setTimeout(() => {
        this.tableData = this.tableData2;

        this.loading = false;
        this.tableLoading = false;
      }, 1000);
      console.log(this.queryParams, "---");
    },
    initRules() {
      let rules = [
        {
          title: "行政区域",
          key: "a",
          type: "select",
          selectList: [
            { name: "平卧位", value: "平卧位" },
            { name: "半卧位", value: "半卧位" },
            { name: "坐位", value: "坐位" },
          ],
          selectKey: "value",
          skip: true,
        },
        {
          title: "医院",
          key: "b",
          skip: true,
        },
        {
          type: "actionBtns",
          selectList: [{ name: "搜索", value: "primary" }],
          ruleWidth: "auto",
        },
      ];
      this.$refs.basicsForm.initForm(rules);
    },
    showDetails() {
      this.openView = true;
      this.$nextTick(() => {
        this.initAddRules();
      });
    },
    initAddRules() {
      let rules1 = [
          {
            title: "故障概况",
            key: "a",
            type: "title",
          },
          {
            title: "故障地点",
            key: "b",
            value: "大坪医院",
            type: "string",
          },
          {
            title: "上报人",
            key: "b",
            value: "大坪医院",
            type: "string",
          },
          {
            title: "电话",
            key: "b",
            value: "大坪医院",
            type: "string",
          },
          {
            title: "邮箱",
            key: "b",
            value: "大坪医院",
            type: "string",
          },
          {
            title: "上报时间",
            key: "b",
            value: "大坪医院",
            type: "string",
          },
          {
            title: "故障描述",
            key: "db",
            type: "textarea",
            value: `1、无法上传CT图像；
2、进行凝血检查的时候APP闪退；
3、无法获取CT检查号，申请CT检查开单的时候，一直处于加载界面，无法正常操作，且经常闪退`,
            type: "string",
            ruleWidth: "100%",
          },
          {
            title: "故障环境",
            key: "ax",
            type: "title",
          },
        ],
        rules2 = [
          {
            title: "故障处理",
            key: "a",
            type: "title",
          },
          {
            title: "故障类型",
            key: "adsds",
            type: "choose",
            selectList: [
              { name: "平卧位", value: "平卧位" },
              { name: "半卧位", value: "半卧位" },
              { name: "坐位", value: "坐位" },
            ],
            selectKey: "value",
          },
          {
            title: "开始处理时间",
            key: "ddewqewqb",
            type: "datetime",
          },
          {
            title: "故障开始时间",
            key: "ddewqewqbd",
            type: "datetime",
          },
          {
            title: "故障原因",
            key: "bsweqwewqs",
            type: "textarea",
            ruleWidth: "100%",
          },
          {
            title: "处理措施",
            key: "dsadsa",
            type: "textarea",
            ruleWidth: "100%",
          },
          {
            title: "恢复情况",
            key: "dbxx",
            type: "title",
          },
          {
            title: "恢复时间",
            key: "ddbcsadasdss",
            type: "datetime",
          },
          {
            title: "恢复结果",
            key: "dsdssdsd",
            type: "textarea",
            ruleWidth: "100%",
          },
          {
            type: "actionBtns",
            selectList: [
              { name: "取消", value: "" },
              { name: "保存", value: "primary" },
              { name: "故障处理完成", value: "success" },
            ],
            btnsAligin: "center",
            ruleWidth: "100%",
          },
        ];
      this.$refs.basicsAddForm1.initForm(rules1);
      this.$refs.basicsAddForm2.initForm(rules2);
    },
    addAction(index) {
      if (index) {
        this.$refs.basicsAddForm2.formValid();
      } else {
        this.openView = false;
      }
    },
    addSubmit(param) {
      if (!param) {
        return;
      }
      console.log(param, "addSubmit");
    },
  },
};
</script>
